<template>
	<div class="top-card">
		<el-card class="top-card-n" shadow="hover" :style="{ background: props.backgroundColor }">
			<template #header> {{ props.title }}</template>
			<el-row class="top-card-n-content" style="text-align: center">
				<el-col :span="item_span" v-for="(item, key) in props.lists">
					<p v-html="item.title"></p>
					<h1 class="text-ellipsis">{{ item.name }}</h1>
				</el-col>
			</el-row>
		</el-card>
	</div>
</template>

<script setup name="topcardOther">
const props = defineProps({
	title: {
		type: String,
		default: () => '标题',
	},
	lists: {
		type: Array,
		default: () => [],
	},
	backgroundColor: {
		type: String,
		default: () => '#409eff',
	},
});

const item_span = 24 / props.lists.length;
// 新增一个响应式属性，用于动态设置背景色
</script>

<style lang="scss" scoped>
.top-card {
	&-top-card-n {
		&-content {
			text-align: center;
		}
	}
	p {
		font-size: 20px;
		color: white;
	}
	:deep() {
		.el-card {
			&__header {
				color: white !important;
				font-weight: bold;
				font-size: 25px !important;
			}

			&__body {
				color: white !important;
				font-weight: bold;
			}
		}
		.title {
			font-size: 20px;
			font-weight: bold;
		}
	}

	margin-bottom: 30px;
}
</style>
